<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="name"/>
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号"  v-model="tel"/>
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="cityStr" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="detailCity">{{detailCity}}</textarea>
			</view>
		<!-- 	<view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<text class="tags" v-for="(item,index) in tags" :style="{'backgroundColor':tagsIndex==index?'#00aaff':'#FFF'}" @click="onSelectTags(index)">{{item}}</text>
					<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
				</view>
			</view>
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><u-switch color="red" v-model="checked" /></view>
			</view>
		</view>
		<u-picker mode="region" ref="uPicker" :params="params" v-model="show" @confirm='onConfirm()'/>
		<view class="addSite" @click="onAddSite()">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>{{btnText}}	
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btnText: '添加',
			show: false,
			name: '',
			tel: '',
			detailCity: '',
			params: {
				province: true,
				city: true,
				area: true
			},
			cityStr: '',
			tags: ['家', '公司', '学校'],
			tagsIndex: 0,
			checked: false,
			
			
			originalData: '',
			updateId: undefined
		};
	},
	onLoad(option) {
		console.log(option.params, '---------77');	
		let params = JSON.parse(option.params)
		let that = this;
		if(params.name){
			this.btnText = '修改'
			this.updateId = params.id
			// this.originalData = JSON.parse(option.params);
			this.name = params.name;
			this.tel = params.phone;
			let arr = params.site.split("  ")
			this.detailCity = arr[1];
			this.cityStr = arr[0];
			
			let tag = params.tag;
			tag.forEach(item=>{
				if(item.tagText=='默认') that.checked = true;
				if(item.tagText=='家') that.tagsIndex = 0;
				if(item.tagText=='公司') that.tagsIndex = 1;
				if(item.tagText=='学校') that.tagsIndex = 2;
			})
		}
	},
	methods: {
		setDefault(index) {
			console.log(index)
			this.default = index
		},
		showRegionPicker() {
			this.show = true;
		},
		
		//城市选择确认
		onConfirm(params) {
			console.log(params)
			this.cityStr = params.province.label + params.city.label + params.area.label
			this.params = params;
		},
		
		//标签选择
		onSelectTags(index){
			this.tagsIndex = index
		},
		
		//存储地址
		onAddSite() {
			console.log(this.name, this.tel, this.detailCity, this.tagsIndex, this.checked)
			let obj = {
				city: this.cityStr,
				name: this.name,
				tel: this.tel,
				detail: this.detailCity,
				tag: this.tagsIndex,
				checked: this.checked
			}
			let that = this;
			let arr = [];
			uni.getStorage({
			    key: 'storage_city',
			    success: function (res) {
					let id = 1;
					id += res.data.id
					if(res.data){
						let data = res.data.city
						if(that.checked) {//默认地址
							data.filter(item=>{
								return item.checked = false;
							})
						}
						// console.log(data)
						if(that.updateId) {
							obj.id = that.updateId;
							
							data = data.map(item=>{
							        if(item.id==that.updateId) {
							         item = obj
							        }
							        return item
							       })
						
						}else{
							obj.id = id;
							arr.push(obj)
							
						}
						// console.log(data,'-------123')
						arr.push.apply(arr,data)
						
					};
					
					
					
					uni.setStorage({
						key: 'storage_city',
						data: {
							city: arr,
							id: id
						},
						success: function () {
							that.$refs.uToast.show({
								title: '成功',
								type: 'success',
								url: '/pages/index/submit/submit'
							})
							// uni.navigateTo({
							//     url: '/pages/index/submit/submit'
							// });
							// console.log('success');
						}
					});
			    },
				fail: function(){
					let id = 1;
					obj.id = id;
					arr.push(obj)
					uni.setStorage({
						key: 'storage_city',
						data: {
							id,
							city: arr
						},
						success: function () {
							that.$refs.uToast.show({
								title: '成功',
								type: 'success',
								url: '/pages/index/submit/submit'
							})
					
							// console.log('success');
						}
					});
				}
			});
			

			
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
	
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: #00aaff;
		border-radius: 60rpx;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
	}
}
</style>
